<template>
  <div class="navigation-bar">
    <div :style="{background: theme}" class="bg-badge"></div>
    <div class="info-title">
      <span>{{title}}</span>
      <slot name="operate"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    props:{
      // 导航标题
      title: {
        type: String,
        default: '基本信息'
      }
    },
    computed: {
      theme() {
        return this.$store.state.settings.theme
      }
    }
  }
</script>

<style scoped lang="scss">
  .navigation-bar {
    display: flex;
    height: 34px;
    .bg-badge {
      width: 10px;
    }
    .info-title {
      padding: 0 10px;
      height: 100%;
      line-height: 34px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-image: linear-gradient(to left, #F8F8F8 , #eeeeee);
      /*background: #eeeeee;*/
    }
    &:hover {
      cursor: pointer;
    }
  }
</style>
